
header{
    z-index: 999;
  }
  .display-flex{
      display: flex;
  }
  .justify-wrap{
      flex-wrap: wrap;  
  }
  .justify-center{
      justify-content: center;
  }
  .align-start{
    align-content: flex-start;
  }
  .margin-top{
      margin-top:40px;
  }
  .padding{
      padding:10px 10px;
  }
.ell{
    -webkit-line-clamp:2;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
}
.clearfix{
    content: "";
    display: block;
    height: 0;
    clear: both;
}

.banner{
    background-image: url(../images/citysearch/banner.gif);
    background-size: 100% 550px; 
    padding-top: 60px;
.banner .container{
    display: flex;
    justify-content: center;
}
    h1{
        width: 45%;
        color:#fff;
        margin-top: 100px;
        margin-bottom: 50px;
    }
    .city_search{
        position: relative;
        width: 60%;
        input{
            padding: 10px 20px;
            width: 100%;
            height: 60px;
            font-size: 20px;
            border: none;
            border-radius: 10px;
        }
        .search_icon{
            position: absolute;
            width: 20%;
            height: 60px;
            background-color: #27AD66;
            padding: 15px;
            font-size: 20px;
            color: #fff;
            right: 0;
            top: 0;
            border-bottom-right-radius: 10px;
            border-top-right-radius: 10px;
        }
    }
    @media screen  and (min-width:780px) and (max-width:1000px){
        h1{
            font-size:28px;
        }
        .city_search{
            input,.search_icon{
            font-size: 16px;
            height: 45px;
        }
        }
    }
    @media screen  and (max-width:780px){
        h1{
            font-size:22px;
        }
        .city_search{
        input,.search_icon{
            font-size: 14px;
            height: 40px;
        }
        .search_icon{
            padding: 8px;
        }
    }
    }
}
.hot_city{        
  
    // background-image:url(../images/citysearch/bg1.png) ;
    // background-size: cover;
    .city-item{
        margin-top: 40px;
        border-radius: 50%;
        margin-bottom: 40px;
        position: relative;
        cursor: pointer;
        .city-img{
            width: 100%;
            border-radius: 50%;
        }
        .style{
            position: absolute;
            bottom: 0;
            width: 90%;
            left: 5%;
        }
        .nav{
            width: 100%;
        }
        .introduce{
            width: 100%;
            position: absolute;
            bottom: 50%;
            transform: translateY(50%);
            h2{
                font-size: 20px; 
                margin: 0px;
             }
            p{
                font-size: 12px;
            }
        }
    }
    .city-item:hover img{
        transform: scale(1.2);
    }
    .city-item:hover .style{
        transform: scale(1.2);
        bottom: -20px;
    }
}
.city_ranklist{
    // background-image: url(../images/citysearch/bg2.png);
    // background-size: 100%;
    .city-list{
        padding-left: 20%;
        .up{
            color:red  ;
        }
        .down{
            color: green;
        }
    }
    h3{
        margin-bottom: 25px;
        padding-left: 20px;
    }
    p{
        font-size: 20px;
        display: block;
        margin-bottom: 20px;
        a{
            display: inline-block;
            color:black;
            padding-left: 20px;
        }
    }

}
.scenery{
    h2{
        margin-top: 20px;
        margin-bottom: 60px;
    }
.area{
        position: relative;
        overflow: hidden;
        img{
            width:100%;
        }
        .text{
            position: absolute;
            display: block;
            box-sizing: border-box;
            padding: 0 25px;
            color: white;
            bottom: 0;
            left: 0;
            z-index: 3;
            transform: translate(0,50%);
            h2{
                
                font-size: 20px;
                margin-bottom:10px;
                transition: transform 0.35s;
            }
            p{
                font-size: 14px;
                opacity: 0;
                transition: opacity 0.35s,transform 0.35s ;
            }
        }
        .mask1{
            position: absolute;
            box-sizing: border-box;
            left:0;
            height: 100%;
            width: 100%;
            z-index: 2;
            padding: 0 15px;
            transform: translate(0,-50%);
            transition: transform 0.35s;
            .mask{
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
            }
        }
    }
.area1:hover .text h2{
    transform: translate(0,-100px);
}
.area1:hover .text p{
    opacity: 1;
    transform: translate(0,-100px);
}
.area2:hover .text h2{
    transform: translate(0,-70px);
}
.area2:hover .text p{
    opacity: 1;
    transform: translate(0,-70px);
}
.area:hover .mask1{
    transform: translate(0,-100%);
}
}
.recommend{
    // background-image: url(../images/citysearch/bg4.png);
    // background-size: cover;
    .note{
        background-color: rgb(208,225,125);
        margin-top: 30px;
    }
    .mome{
        margin-top: 20px;
        background-color: rgb(255,223,37);
    }
    .sticky{
        background-color: rgb(54,169,206);
        margin-top: 60px;
    }
    .NOTES{
        background-color: rgb(239,90,161);
        margin-top: 40px;
    }
}
